<template>
    <div class="bet">
        <div class="panel panel-default">

          <!--头-->
            <div class="panel-heading">
                <h4>竞彩投注</h4>
                <a href="">更多比赛</a>
            </div>

          <!--具体信息-->
            <div class="panel-body">
                <div class="div1">
                    <dl>
                        <dt>西班牙杯 2018-02-01 23:50:00</dt>
                        <dd @click="addBorder1()" ref="addBorder1">
                            <div class="flex">
                                <div class="left">
                                    <img src="../../assets/images/container1/container/2817.png" alt="">
                                </div>
                                <div class="right">
                                    <p>巴塞罗那</p>
                                    <p>胜1.13</p>
                                </div>
                            </div>
                        </dd>
                        <dd @click="addBorder2()" ref="addBorder2">
                            <div class="middle">
                                <p>vs</p>
                                <p>平6.50</p>
                            </div>
                        </dd>
                        <dd @click="addBorder3()" ref="addBorder3">
                            <div class="flex">
                                <div class="left2">
                                    <p>巴伦西亚</p>
                                    <p>胜11.00</p>
                                </div>
                                <div class="right2">
                                    <img src="../../assets/images/container1/container/2828.png" alt="">
                                </div>
                            </div>
                        </dd>
                    </dl>
                </div>
                <bet-button v-bind:thing="things" @addRate="addRate" @removeRate="removeRate"></bet-button>
            </div>

        </div>
    </div>
</template>

<script>
    import BetButton from './BetButton'


    export default {
        name: "bet",
        components: {
            BetButton
        },
        data(){
            return {
                things: [
                  {border1: false},
                  {border2: false},
                  {border3: false},
                  {price: 0.},
                  {rate: 10}
                ]
            };
        },
        methods: {
            addBorder1() {
                this.things[0].border1 = !this.things[0].border1;
                if (this.things[0].border1) {
                    this.things[3].price += 2;
                    this.$refs.addBorder1.style.border = "2px solid red";
                } else {
                    this.things[3].price -= 2;
                    this.$refs.addBorder1.style.border = "";
                }
            },
            addBorder2() {
                this.things[1].border2 = !this.things[1].border2;
                if (this.things[1].border2) {
                    this.things[3].price += 2;
                    this.$refs.addBorder2.style.border = "2px solid red";
                } else {
                    this.$refs.addBorder2.style.border = "";
                    this.things[3].price -= 2;

                }
            },
            addBorder3() {
                this.things[2].border3 = !this.things[2].border3;
                if (this.things[2].border3) {
                    this.things[3].price += 2;
                    this.$refs.addBorder3.style.border = "2px solid red";
                } else {
                    this.$refs.addBorder3.style.border = "";
                    this.things[3].price -= 2;
                }
            },

            addRate(){
                this.things[4].rate += 1;
            },

            removeRate(){
              this.things[4].rate -= 1;
            },

        }
    }
</script>

<style scoped>
 .bet{
     background: #fff;
 }
.bet .panel-heading{
    display: flex;
    /*2端对齐*/
    justify-content: space-between;
    /*垂直居中*/
    align-items: center;
    background: white;
}
.bet .panel-heading a{
   font-size: 14px;
    color: #555;
}
.bet .panel-heading a:hover{
   text-decoration: none;
    color: #e23a3a;
}
.bet .panel-body dl dd{
   border: 2px solid #e5e5e5;
   float: left;
    margin-left: 28px;
}
.bet .panel-body dl dt{
   font-size: 14px;
    color: #999;
    margin-bottom: 8px;
}
.bet .panel-body dl dd:hover{
    cursor: pointer;
    background: #f6f6f6;
}
.bet .panel-body dl dd:nth-of-type(1){
    width: 192px;
    height: 72px;
    border: 1px solid #999;
}
.bet .panel-body dl dd:nth-of-type(2){
    width: 142px;
    height: 72px;
}
.bet .panel-body dl dd:nth-of-type(2) p{
   margin-left: 60px;
    margin-top: 10px;
}
.bet .panel-body dl dd:nth-of-type(2) p:nth-of-type(2){
    margin-left: 50px;
    margin-top: 5px;
}
.bet .panel-body dl dd:nth-of-type(3){
    width: 192px;
    height: 72px;
}
.bet .panel-body dl dd .flex{
   display: flex;
    justify-content: space-around;
}
.bet .panel-body dl dd .flex .left2 p:nth-of-type(1){
    font-size: 18px;
    color: #000;
}
.bet .panel-body dl dd .flex .left2 p:nth-of-type(2){
    margin-left: 10px;
}
.bet .panel-body dl dd .middle p:nth-of-type(2),
.bet .panel-body dl dd .flex .right p:nth-of-type(2),
.bet .panel-body dl dd .flex .left2 p:nth-of-type(2){
    font-size: 14px;
    color: #999;
}
.bet .panel-body dl dd .flex .right p:nth-of-type(1){
   font-size: 18px;
    color: #000;
    margin-left: -15px;
}
.bet .panel-body dl dd .flex div{
   margin-top: 7px;
}
</style>
